<template>
	<div>
		<a-card title="简报" :bordered="true">
			<h3>{{welcome}}: {{loginUserInfo.name}} </h3>
			<p>{{content}}</p>
		</a-card>
		<a-row :gutter="24">
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<a-card title="平台用户" :bordered="true">
					<span>
						<a-statistic title="" :value="1128" style="margin-right: 50px">
							<template #suffix>
								<a-icon type="user" />
							</template>
						</a-statistic>
					</span>
				</a-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<a-card title="总帖子数" :bordered="true">
					<span>
						<a-icon type="book" /> 89332
					</span>
				</a-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<a-card title="总访问量" :bordered="true">
					<h2>{{visitCount}}</h2>
					<span id="visited" style="width: 600px; height: 300px;"></span>
				</a-card>
			</a-col>
			<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
				<a-card title="在线人数" :bordered="true">
					<a-icon type="user" /> 932
				</a-card>
			</a-col>
		</a-row>
	</div>
</template>

<script>
	import {
		timeFix,
		welcome
	} from '@/utils/util.js'
	export default {
		name: 'DataDetail',
		mounted() {
			this.drawVisited()
			this.getWelcome()
		},
		data() {
			return {
				loginUserInfo: {},
				welcome: '',
				content: '',
				visitedOptions: {
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['2月', '3月', '4月']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [119, 335, 1001],
						type: 'line',
						areaStyle: {
							color: 'purple'
						}
					}]
				},
				visitCount: 2323
			}
		},
		computed: {},
		methods: {
			getWelcome() {
				this.loginUserInfo = JSON.parse(sessionStorage.getItem('adminInfo')).adminInfo
				this.welcome = timeFix()
				this.content = welcome()
			},
			// 绘制访问量坐标图
			drawVisited() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('visited'), {
					width: '100px',
					height: '100px'
				})
				// 绘制图表
				myChart.setOption(this.visitedOptions)
			}
		}
	}
</script>

<style>
</style>
